<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点-粤亮旅游网</title>
    <!-- 引入公共css -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/sight.css">
    <script src="../js/jquery-3.3.1.js"></script>

    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?rghiog');
            src: url('fonts/icomoon.eot?rghiog#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?rghiog') format('truetype'),
            url('fonts/icomoon.woff?rghiog') format('woff'),
            url('fonts/icomoon.svg?rghiog#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<body>

<!--  -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>
                    <a href="orders.html" style="padding: 0 10px ">我的订单</a>
                    <a href="#" class="logout">退出</a>
                </li>
            </ul>
        </div>

    </div>
</section>
<!-- 核心内容部分 -->
<div class="box w">

</div>
<script>
    function clickCollection(collection){
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const viewId = urlParams.get('viewId');
        if (collection.classList.contains('red')) {
            collection.classList.remove('red');
        } else {
            collection.classList.add('red');
        }

        const action = $(collection).hasClass('red') ? 'add' : 'remove';

        // const requestData = {
        //     viewId: viewId
        // }

        // 发送Ajax请求
        $.ajax({
            url: '/view/favorite?action='+action+'&viewId='+viewId,
            type: 'GET',
            // data: JSON.stringify(requestData),
            contentType: "application/json",
            success: function(response) {
                if (response.success === 1){
                    console.log(response);
                }
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    }

    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    window.addEventListener("DOMContentLoaded", function () {
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const viewId = urlParams.get('viewId');

        $.ajax({
            url: `/view/detail?viewId=${viewId}`,
            type: "GET",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    const image = getImage(response.data.viewImage);
                    // alert("成功")
                    let html = ''
                    html += `
                            <div class="tit">
        <div class="name">${response.data.viewName}</div>
        <div class="score">${response.data.score}分</div>`

                   if (`${response.data.flag}` === '1'){
                       html += `
        <div class="collection red" onclick="clickCollection(this)">
            
        </div>`
                   }else {
                       html += `
        <div class="collection" onclick="clickCollection(this)">
            
        </div>`
                   }

                            html += `
        <div class="collection collection-ch">收藏</div>
        <div class="count-collection">${response.data.count}人收藏</div>
    </div>
    <img src="${image}" alt="">
    <div class="about">
        <div class="introduce">${response.data.description}
        </div>
        <table>
            <tr>
                <td>开放时间:</td>
                <td class="time">全天</td>
            </tr>
            <tr>
                <td>门票:</td>
                <td class="price">免费</td>
            </tr>
        </table>
    </div>
                    `
                document.querySelector('.box').innerHTML = html
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })

    })

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData')
                    localStorage.removeItem('hotelDetail')
                    localStorage.removeItem('cityData')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })
</script>
</body>

</html>